<template>
  <div class="pdfdetails">
    <!-- 头部 -->
    <div class="header">
      <div class="header-left" @click="back">
        <img class="a1" src="../assets/zuojiantou.png" alt />
      </div>

      <div class="header-right">
        <div class="fenxiang shoushou" @click="fenxiang">
          <img class="a2" src="../assets/fx.png" alt />
          <div>分享</div>
        </div>
        <div class="fenxiang shoushou" @click="xiazai">
          <img class="a3" src="../assets/xiazai@3x.png" alt />
          <div>下载</div>
        </div>
        <div class="shenglvehao" @click="shenglvehaokuang">
          <img
            class="seng"
            v-show="shenglvehaoshow == false"
            src="../assets/pdfshenglvehao.png"
            alt
          />
          <img class="sengs" v-show="shenglvehaoshow == false" src="../assets/shengluehao2.png" alt />
          <img
            class="sengs sengss"
            v-show="shenglvehaoshow == true"
            src="../assets/shengluehao2.png"
            alt
          />
        </div>

        <div class="shenglvehaokuang shoushou" v-show="shenglvehaoshow == true">
          <div @click="changyong" v-if="fileObject.isCommonly == 0">设为常用</div>
          <div @click="changyong" v-if="fileObject.isCommonly == 1">取消常用</div>
          <div @click="xingbiao" v-if="fileObject.isFollow == 0">设为星标</div>
          <div @click="xingbiao" v-if="fileObject.isFollow == 1">取消星标</div>
          <div @click="chongmingming">重命名</div>
          <div @click="shanchu">删除</div>
        </div>
      </div>
    </div>

    <!-- 内容 -->
    <div class="mainpdf">
      <div class="nr" v-if="fileObject.preview == 1">
        <iframe
          v-if="fileObject.fileType!=2"
          :src="fileObject.previewUrl"
          frameborder="0"
          ref="hello"
        ></iframe>

        <div v-if="status==1" class="gundong"  >
          <img id="tu" v-if="fileObject.fileType==2" :src="fileObject.previewUrl" alt />
        </div>

        <div v-if="status==2" class="gundong" >
          <img id="tu" class="tujuzhong" v-if="fileObject.fileType==2" :src="fileObject.previewUrl" alt />
        </div>

        <div v-if="status==0" class="ifimage">
          <img id="tu" v-if="fileObject.fileType==2" :src="fileObject.previewUrl" alt />
        </div>

      </div>
      <div class="dabukai" v-if="fileObject.preview == 0">
        <img class="a4" src="../assets/pdfdabukai.png" alt />
        <div class="kai1">.{{fileObject.fileFormat}} 文件类型无法预览</div>
        <div class="kai2">{{fileObject.fileName}}</div>
        <div class="kai3 shoushou" @click="xiazai">下载</div>
      </div>
    </div>

    <!-- 重命名 -->
    <div class="querenshanchu" v-show="mingmingtc==true">
      <div class="box">
        <img class="cha" @click="gaojicha(1)" src="../assets/cha.png" alt />

        <div class="tishi">名称</div>
        <div class="inputboxcmm">
          <input type="text" ref="getFocus" @focus="focus($event)" v-model="cmminput" />
        </div>
        <div class="buttombox">
          <div class="btn1 shoushou" @click="gaojicha(1)">取消</div>
          <div class="btn2 shanchubtn2 shoushou" @click="querenmingming">确认</div>
        </div>
      </div>
    </div>

    <!-- 确认删除弹窗 -->
    <div class="querenshanchu" v-show="shanchutc==true">
      <div class="box">
        <img class="cha" @click="gaojicha(2)" src="../assets/cha.png" alt />

        <div class="tishi">提示</div>
        <div class="tishiyu">删除后文件将进入回收站，30天后文件自动彻底删除</div>
        <div class="buttombox">
          <div class="btn1 shoushou" @click="gaojicha(2)">取消</div>
          <div
            class="btn2 shanchubtn2 shoushou"
            style="background:#3B3B3B"
            @click="querenshanchu"
          >确认</div>
        </div>
      </div>
    </div>

    <!-- 分享 -->
    <div class="querenshanchu" v-show="fenxiangtc==true">
      <div class="box" style="height:418px;width:450px;">
        <img class="cha" @click="gaojicha(3)" src="../assets/cha.png" alt />

        <div class="tishi">分享</div>
        <div class="xianfx"></div>
        <div class="disflex">
          <div class="inputboxcmm">
            <input type="text" :value="fenxiangdata.url" />
          </div>
          <div class="fuzhi shoushou" @click="fuzhi(fenxiangdata.url)">复制</div>
        </div>
        <div class="xianfx"></div>
        <div class="codeimgbox">
          <img class="a5" :src="fenxiangdata.quCode" alt />
          <div>扫码分享查看</div>
        </div>
      </div>
    </div>
  </div>
</template>
          
<script>
export default {
  name: "detail",
  data() {
    return {
      // 文件对象
      fileObject: "",
      // 文件名
      cmminput: "",
      // 省略号添加样式
      classtrue: false,
      // 省略号弹出框显示隐藏
      shenglvehaoshow: false,
      // 重命名
      mingmingtc: false,
      // 确认删除弹窗
      shanchutc: false,
      // 分享
      fenxiangtc: false,
      fenxiangdata: "",
      status: 0
    };
  },
  created() {},
  methods: {
    focus: function(event) {
      event.currentTarget.select();
    },
    // 省略号弹出框显示隐藏   // 省略号添加样式
    shenglvehaokuang() {
      this.shenglvehaoshow = !this.shenglvehaoshow;
      console.log(this.shenglvehaoshow, "this.shenglvehaoshow");
      this.classtrue = true;
    },
    // 返回上一层
    back() {
      this.$router.go(-1); //返回上一层
    },
    // 分享
    fenxiang() {
      this.fenxiangtc = true;
      this.$axios({
        method: "post",
        url: "/share",
        headers: {
          Accept: "application/json;",
          "Content-Type": "application/json;"
        },
        data: {
          id: [this.fileObject.id],
          page:'pages/shouxia/shouxia'
        }
      })
        .then(response => {
          console.log(response);
          response.data.data.quCode =
            "data:image/png;base64," + response.data.data.quCode;
          this.fenxiangdata = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 复制
    fuzhi(shareLink) {
      var _input = document.createElement("input"); // 直接构建input
      _input.value = shareLink; // 设置内容
      document.body.appendChild(_input); // 添加临时实例
      _input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      this.$message("复制成功");
      document.body.removeChild(_input); // 删除临时实例
    },
    // 下载
    xiazai() {
      var id = this.fileObject.id;
      var fileName = this.fileObject.fileName;
      this.$axios({
        method: "get",
        url: "/file/downloadFile/" + id,
        headers: {
          Accept: "application/json;",
          "Content-Type": "application/json;"
        },
        responseType: "blob"
      })
        .then(data => {
          console.log(data);
          if (!data) {
            return;
          }

          // debugger
          let url = window.URL.createObjectURL(data.data);
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);

          link.click();
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 设为常用
    changyong() {
      console.log(12345678978979879879878);
      this.classtrue = false;
      var ischangyong;
      if (this.fileObject.isCommonly == 0) {
        ischangyong = 1;
      } else {
        ischangyong = 0;
      }
      this.$axios({
        method: "post",
        url: "/file/setUp",
        headers: {
          Accept: "application/json;",
          "Content-Type": "application/json;"
        },
        data: {
          id: this.fileObject.id,
          isCommonly: ischangyong // 1为常用 0为非常用
        }
      })
        .then(response => {
          if (response.data.status == 200) {
            console.log("设为常用成功");
            if (ischangyong == 0) {
              console.log(ischangyong, "ischangyong");
              this.fileObject.isCommonly = 0;
              this.$forceUpdate();
            } else {
              this.fileObject.isCommonly = 1;
              this.$forceUpdate();
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 设为星标
    xingbiao() {
      this.classtrue = false;
      console.log(this.fileObject.isFollow, "this.fileObject.isFollow");
      var isxingbiao;
      if (this.fileObject.isFollow == 0) {
        isxingbiao = 1;
      } else {
        isxingbiao = 0;
      }
      this.$axios({
        method: "post",
        url: "/file/setUp",
        headers: {
          Accept: "application/json;",
          "Content-Type": "application/json;"
        },
        data: {
          id: this.fileObject.id,
          isFollow: isxingbiao // 1为星标 0为非星标
        }
      })
        .then(response => {
          if (response.data.status == 200) {
            console.log("设为星标成功");
            if (isxingbiao == 0) {
              console.log(isxingbiao, "ischanisxingbiaogyong");
              this.fileObject.isFollow = 0;
              this.$forceUpdate();
            } else {
              this.fileObject.isFollow = 1;
              this.$forceUpdate();
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 重命名 弹框
    chongmingming() {
      this.classtrue = false;
      this.mingmingtc = true;
      this.$nextTick(() => {
        // 2. 弹框显示DOM更新完成后 获取refs.ref1 设置焦点
        console.log(this.$refs.getFocus);
        this.$refs.getFocus.focus(); // 设置焦点
      });
    },
    // 删除  弹框
    shanchu() {
      this.classtrue = false;
      this.shanchutc = true;
    },
    // 差号  取消按钮
    gaojicha(index) {
      if (index == 1) {
        this.mingmingtc = false;
      }
      if (index == 2) {
        this.shanchutc = false;
      }
      if (index == 3) {
        this.fenxiangtc = false;
      }
    },
    // 确认命名按钮
    querenmingming() {
      this.mingmingtc = false;
      var mingming = this.cmminput + "." + this.fileObject.fileFormat;
      console.log(mingming, "mingming");
      this.$axios({
        method: "post",
        url: "/file/setUp",
        headers: {
          Accept: "application/json;",
          "Content-Type": "application/json;"
        },
        data: {
          id: this.fileObject.id,
          fileName: mingming
        }
      })
        .then(response => {
          if (response.data.status == 200) {
            console.log("重命名成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 确认删除按钮
    querenshanchu() {
      this.shanchutc = false;
      this.$axios({
        method: "post",
        url: "/file/setUp",
        headers: {
          Accept: "application/json;",
          "Content-Type": "application/json;"
        },
        data: {
          id: this.fileObject.id,
          isDelete: 1 // 1为删除 0为不删除
        }
      })
        .then(response => {
          if (response.data.status == 200) {
            console.log("删除成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    settime() {
      this.$axios({
        method: "post",
        url: "/applet/updateTime",
        headers: {
          Accept: "application/json;",
          "Content-Type": "application/json;"
        },
        data: {
          id: this.fileObject.id
        }
      })
        .then(response => {})
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {
    // var a = document.getElementById("ipip").contentWindow.document.body;
    // console.log(a,'a')

    this.fileObject = this.$route.query.fileObject;
    this.status = 0;
    console.log(this.status);

    // console.log(this.fileObject, "123456798456789");
    this.cmminput = this.fileObject.firstname;
    var that = this;
    document.addEventListener("click", function(e) {
      var initem = false;
      e.path.forEach(element => {
        if (element.className == "shenglvehao") {
          initem = true;
        }
      });
      if (initem == false) {
        console.log(123123123123);
        that.shenglvehaoshow = false;
        // that.classtrue = false;
      }
    });

    setTimeout(() => {
      var tu = document.getElementById("tu");
      if (this.fileObject.fileType == 2) {
        var width = document.body.clientWidth;
        var height = document.body.clientHeight-68;
        console.log(width,'pingmu');
        console.log(height);
		var that=this
        tu.onload = function() {
          var tuwidth = tu.offsetWidth;
          var tuheight = tu.offsetHeight;

		  // alert("图片加载已完成");
		  
          console.log(tuwidth,'tupian');
           console.log(tuheight);

           

          if (tuwidth > width) {
            console.log(tu.style);
            tu.style.width = width + "px";
            that.status = 1;
          } else {
            
            if (tuheight > height) {
			      	that.status = 2;
              console.log(tu.style);
              
            }
          }
        };

        var tuwidth1 = tu.offsetWidth;  
        var aa=1
        var tuheight1 = tu.offsetHeight;

        // alert("图片加载已完成");
        console.log(tuwidth1);
        if (tuwidth1 > width) {
          this.status = 1;
          console.log(tu.style);
          tu.style.width = width + "px";
        } else {
         
          if (tuheight1 > height) {
			   this.status = 2;
            console.log(tu.style);
            tu.style.textAlign = 'center'
          }
        }
      }
    }, 0);

    this.settime();
  },
  created() {
    // this.$nextTick(() => {
    //   console.log(444);
    //   console.log(this.$refs["hello"]);
    //   console.log(this.$refs["hello"].contentWindow);
    //   console.log(this.$refs["hello"].contentWindow.document.body.img);
    // });
  }
};
</script>

<style  scoped>
.gundong {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
}

.pdfdetails {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  height: 68px;
  background: #fff;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-left {
  width: 22px;
  height: 22px;
  margin-left: 16px;
}
.header-left img {
  width: 22px;
  height: 22px;
}

.header-right {
  display: flex;
  align-items: center;
}
.fenxiang {
  display: flex;
  align-items: center;
  border: 1px solid #dbdfe3;
  width: 92px;
  height: 32px;
  font-size: 14px;
  color: #333;
  border-radius: 20px;
  margin-right: 24px;
  cursor: pointer;
}
.fenxiang img {
  width: 16px;
  height: 16px;
  margin-left: 15px;
  margin-right: 8px;
}
.shenglvehao {
  margin-right: 32px;
  width: 30px;
  height: 28px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  margin-bottom: 7px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shenglvehao .seng {
  width: 18px;
  height: 4px;
}
.shenglvehao:hover .sengs {
  display: block;
}
.shenglvehao:hover .seng {
  display: none;
}
.shenglvehao .sengs {
  display: none;
}
.shenglvehao .sengss {
  display: block;
}

/* 省略号框 */
.shenglvehaokuang {
  position: absolute;
  right: 30px;
  top: 55px;
  width: 176px;
  height: 174px;
  background: #ffffff;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  border-radius: 2px;
  text-align: left;
  z-index: 99999999999999;
}

.shenglvehaokuang div {
  width: 100%;
  height: 43px;
  line-height: 43px;
  font-size: 14px;
  color: #4f4f56;
  padding-left: 22px;
  box-sizing: border-box;
}
.shenglvehaokuang div:hover {
  background: #f2f2f2;
}
.beijingyanse {
  background: #f2f2f2;
}

/* 内容部分 */
.mainpdf {
  background: #fff;
  height: calc(100vh - 69px);
}
.nr {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.nr iframe {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}

.ifimage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dabukai {
  width: 300px;
  height: 300px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.kai1 {
  font-size: 18px;
  color: #151515;
}
.kai2 {
  font-size: 12px;
  color: #646a73;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kai3 {
  margin: auto;
  width: 64px;
  height: 32px;
  background: #393939;
  text-align: center;
  line-height: 32px;
  border-radius: 3px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.querenshanchu {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}
.querenshanchu .box {
  width: 398px;
  height: 180px;
  background: #fff;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 30px;
  box-sizing: border-box;
}
.cha {
  position: absolute;
  top: 18px;
  right: 20px;

  width: 16px;
  height: 16px;
}
.box .tishi {
  height: 64px;
  line-height: 22px;
  padding-top: 28px;
  box-sizing: border-box;
  font-size: 16px;
  color: #333333;
  font-weight: 600;
}
.tishiyu {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #4d4d54;
}
.buttombox {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.buttombox > div {
  width: 64px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 5px;
}
.buttombox .btn1 {
  border: 1px solid #dfe0e3;
  color: #4d4d54;
  font-size: 14px;
  margin-right: 10px;
}
.buttombox .btn2 {
  width: 64px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 4px;
  padding: 0px 0px;
  color: #fff;
  font-size: 14px;
  background: #3b3b3b;
  /* opacity: 0.24; */
}
.buttombox .shanchubtn2 {
  background: #3b3b3b;
  color: #fff;
  font-size: 14px;
}
.inputboxcmm {
  width: 324px;
  height: 40px;
  background: #f5f5f5;
  margin-right: 8px;
  border-radius: 4px;
  margin-top: 10px;
}
.inputboxcmm input {
  color: #717176;
  width: 324px;
  height: 40px;
  font-size: 14px;
  padding: 5px 10px;
  box-sizing: border-box;
}
.xianfx {
  width: 100%;
  height: 1px;
  background: #f6f6f6;
}
.codeimgbox {
  padding: 30px 0;
  text-align: center;
}
.codeimgbox img {
  width: 112px;
  height: 112px;
}
.codeimgbox div {
  font-size: 16px;
  color: #4d4d54;
  margin-top: 20px;
}
.disflex {
  display: flex;
  width: 100%;
  height: 31px;
  align-items: center;
  justify-content: flex-start;
  margin: 28px 0;
  margin-bottom: 42px;
}
.fuzhi {
  width: 72px;
  height: 40px;
  background: #393939;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin-top: 10px;
}

/* 重命名样式 */
/* .querenshanchu{
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, 0.5);
  position:fixed;
  top:0;
  left:0;
}
.querenshanchu .box{
  width:398px;
  height:200px;
  background:#fff;
  border-radius: 10px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  padding: 0 24px;
}
.cha{
  position: absolute;
  top:13px;
  right:13px;
  width:16px;
  height:16px;
}

.box .tishi{
  height:70px;
  line-height: 70px;
  font-size:20px;
  color:#333;
	font-weight: 660;
}
.tishiyu{
  height:50px;
  line-height: 50px;
  font-size: 14px;
	color: #4D4D54;
}
.buttombox{
  height:80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;

}
.buttombox>div{
  width:64px;
  height:32px;
  line-height: 32px;
  text-align: center;
  border-radius: 5px;
}
.buttombox .btn1{
	border: 1px solid #DFE0E3;
	color: #4D4D54;
	font-size:14px;
	margin-right:10px;
}
.buttombox .btn2{
  color:#fff;
  font-size:14px;
	opacity: 0.24;
	background: #3B3B3B;
}
.buttombox .shanchubtn2{
	background: #3B3B3B;
	color:#fff;
  font-size:14px;
}
.inputboxcmm{
  width:324px;
  height:40px;
  background: #F5F7FE;
  margin-right:5px;
	border-radius: 5px;
	margin-top: 10px;
}
.inputboxcmm input{
	color:#717176;
	width:324px;
  height:40px;
	font-size: 16px;
	padding:  5px 10px;
	box-sizing: border-box;
}
.disflex{
  display: flex;
  width:100%;
  height:31px;
  align-items: center;
  justify-content: flex-start;
  margin:28px 0;
}
.fuzhi{
  width:72px;
  height:40px;
  background: #393939;
  color:#fff;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
	margin-top: 10px;
	margin-left: 10px;
	cursor: pointer;
} */
.xianfx {
  width: 100%;
  height: 1px;
  background: #f6f6f6;
}
.codeimgbox {
  padding: 30px 0;
  text-align: center;
}
.codeimgbox img {
  width: 112px;
  height: 112px;
}
.codeimgbox div {
  font-size: 16px;
  color: #4d4d54;
  margin-top: 20px;
}
.shoushou {
  cursor: pointer;
}
.tujuzhong{
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
}
</style>
